<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
  <script src="../../layui/layui.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <h3>基础菜单 - 页面元素</h3>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md2">
        <div class="layui-panel">
          <ul class="layui-menu" id="docDemoMenu1">
            <li lay-options="{id: 100}">
              <div class="layui-menu-body-title">menu item 1</div>
            </li>
            <li lay-options="{id: 101}">
              <div class="layui-menu-body-title">
                <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
              </div>
            </li>
            <li class="layui-menu-item-divider"></li>
            <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
              <div class="layui-menu-body-title">
                menu item 3 group <i class="layui-icon layui-icon-up"></i>
              </div>
              <ul>
                <li lay-options="{id: 1031}">menu item 3-1</li>
                <li lay-options="{id: 1032}">
                  <div class="layui-menu-body-title">menu item 3-2</div>
                </li>
              </ul>
            </li>
            <li class="layui-menu-item-divider"></li>
            <li lay-options="{id: 104}">
              <div class="layui-menu-body-title">menu item 4</div>
            </li>
            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
              <div class="layui-menu-body-title">
                menu item 5
                <i class="layui-icon layui-icon-right"></i>
              </div>
              <div class="layui-panel layui-menu-body-panel">
                <ul>
                  <li lay-options="{id: 1051}">
                    <div class="layui-menu-body-title">menu item 5-1</div>
                  </li>
                  <li lay-options="{id: 1051}">
                    <div class="layui-menu-body-title">menu item 5-2</div>
                  </li>
                </ul>
              </div>
            </li>
            <li lay-options="{id: 106}">
              <div class="layui-menu-body-title">menu item 6</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="layui-row">
      <p>可以看到，它实则是一个 ul li 的层级嵌套，当需要出现「菜单组」和「子级菜单」时，只需要添加相对应的 class 类名即可。</p>
      <h3>菜单项类型</h3>
      <img src="../../img/27.png" alt="">
      <p>其子级菜单遵循的列表类型也是一样的。需要注意的是，「可收缩菜单组」的子菜单仅需要再嵌套一层 ul 即可；而「横向父子菜单」还需要套一层 div class="layui-panel
        layui-menu-body-panel"，以便让子菜单层次更加分明。</p>
      <h3>菜单项参数</h3>
      <pre>
    <li lay-options="{
      id: 100
      ,title: 'menu item 1'
      ,type: '' //支持的类型有：group、parent，具体用法参见上文
      ,aaa: '任意参数'
    }">内容</li>
    </pre>
    </div>
  </div>
  <script>
    layui.use(['form', 'layer', 'element'], function () {
      var foprm = layui.form,
        element = layui.element;
      element.render('nav', 'component-nav');
    });
  </script>
</body>

</html>